<template>
  <DefaultList v-bind="listConfig" />
</template>

<script setup lang="ts">
import DefaultList from '@/components/lists/DefaultList.vue'

const listConfig: TableGlobalType = {
  id: 'article-list',
  tableKey: 'id',
  table: {
    data: [],
    attrs: {
      stripe: true,
      border: true
    }
  },
  columns: [
    {
      id: '_index',
      attrs: {
        label: '#',
        type: 'index'
      }
    },
    {
      id: 'avatar',
      'slot-default': 'picture',
      attrs: {
        label: '封面图',
        prop: 'cover',
        width: '100px'
      }
    },
    {
      id: 'title',
      attrs: {
        label: '标题',
        prop: 'title',
        width: '120px'
      }
    }
  ],
  pagination: {
    'current-page': 1,
    'page-size': 30,
    total: 0,
    attrs: {
      background: true,
      layout: 'total, sizes, prev, pager, next, jumper'
    }
  },
  search: {
    id: 'article-list-search-form',
    submitText: '查询',
    submitStyle: {
      'justify-self': 'end'
    },
    resetText: '重置',
    form: {
      action: '/article',
      method: 'get',
      model: {
        keywords: ''
      },
      attrs: {
        inline: true,
        style: {
          'grid-template-areas': `
                                    "keywords . form-submit"
                                `
        }
      }
    },
    fields: [
      {
        'field-type': 'input',
        'field-label': '',
        id: 'keywords',
        model: 'keywords',
        attrs: {
          placeholder: '请输入关键字搜索'
        },
        'grid-area': 'keywords'
      }
    ]
  },
  detail: {
    form: {
      id: 'article-detail-form',
      submitText: '详情',
      form: {
        action: '/article/$1',
        method: 'get',
        model: {},
        attrs: {}
      },
      fields: []
    },
    info: {
      id: 'article-detail',
      detail: {
        model: {},
        'descriptions-attrs': {
          border: true,
          column: 2
        },
        attrs: {}
      },
      fields: [
        {
          id: 'cover',
          'field-type': 'image',
          'field-label': '封面图',
          model: 'cover',
          'descriptions-item-attrs': {},
          attrs: {
            style: {
              width: '100px',
              height: '100px'
            }
          }
        },
        {
          id: 'title',
          'field-type': 'text',
          'field-label': '标题',
          model: 'title',
          'descriptions-item-attrs': {},
          attrs: {}
        },
        {
          id: 'createdAt',
          'field-type': 'text',
          'field-label': '创建时间',
          model: 'createdAt',
          'descriptions-item-attrs': {
            span: 2
          },
          attrs: {}
        }
      ]
    }
  },
  add: {
    id: 'article-add-form',
    submitText: '新增',
    submitStyle: {
      'justify-self': 'end'
    },
    form: {
      action: '/article',
      method: 'post',
      model: {
        categoryId: 0,
        title: '',
        content: '',
        status: 0,
        tags: []
      },
      attrs: {
        'label-width': 80,
        style: {
          gap: '10px',
          'grid-template-areas': `
                                    "title ."
                                    "categoryId ."
                                    "content content"
                                    "status ."
                                    "tags ."
                                    "cover cover"
                                    ". form-submit"
                                `
        }
      }
    },
    fields: [
      {
        'field-type': 'input',
        'field-label': '标题',
        id: 'title',
        model: 'title',
        attrs: {},
        'grid-area': 'title'
      },
      {
        'field-type': 'remote-object-select',
        'field-label': '分类',
        id: 'categoryId',
        model: 'categoryId',
        attrs: {
          optionLabel: 'name',
          optionValue: 'id',
          remote: {
            action: '/category/all',
            method: 'get',
            model: {},
            attrs: {}
          },
          options: [
            {
              label: '顶级分类',
              value: 0
            }
          ],
          selectAttrs: {
            filterable: true
          }
        },
        'grid-area': 'categoryId'
      },
      {
        'field-type': 'wang-editor',
        'field-label': '内容',
        id: 'content',
        model: 'content',
        attrs: {
          toolbarConfig: {},
          editorConfig: {},
          mode: 'simple',
          height: 350,
          customUploadOptions: {
            action: `${import.meta.env.VITE_API_BASE_URL}/file/upload-image`,
            fieldname: 'file',
            srcModel: 'path',
            method: 'POST'
          }
        },
        'grid-area': 'content'
      },
      {
        'field-type': 'radio-group',
        'field-label': '状态',
        id: 'status',
        model: 'status',
        name: 'status',
        options: [
          {
            value: 0,
            label: '草稿'
          },
          {
            value: 1,
            label: '发布'
          }
        ],
        attrs: {},
        'grid-area': 'status'
      },
      {
        'field-type': 'remote-object-select',
        'field-label': '标签',
        id: 'tags',
        model: 'tags',
        attrs: {
          optionLabel: 'name',
          optionValue: 'id',
          remote: {
            action: '/tag/all',
            method: 'get',
            model: {},
            attrs: {}
          },
          selectAttrs: {
            filterable: true,
            multiple: true
          }
        },
        'grid-area': 'tags'
      },
      {
        'field-type': 'image-upload',
        'field-label': '封面图',
        id: 'cover',
        model: 'coverId',
        attrs: {
          action: `${import.meta.env.VITE_API_BASE_URL}/file/upload-image`
        },
        'grid-area': 'cover'
      }
    ]
  },
  edit: {
    id: 'article-edit-form',
    submitText: '编辑',
    submitStyle: {
      'justify-self': 'end'
    },
    form: {
      action: '/article/$1',
      method: 'patch',
      model: {},
      attrs: {
        'label-width': 80,
        style: {
          gap: '10px',
          'grid-template-areas': `
                                    "title ."
                                    "categoryId ."
                                    "content content"
                                    "status ."
                                    "tags ."
                                    "cover cover"
                                    ". form-submit"
                                `
        }
      }
    },
    fields: [
      {
        'field-type': 'input',
        'field-label': '标题',
        id: 'title',
        model: 'title',
        attrs: {},
        'grid-area': 'title'
      },
      {
        'field-type': 'remote-object-select',
        'field-label': '文章分类',
        id: 'categoryId',
        model: 'categoryId',
        attrs: {
          optionLabel: 'name',
          optionValue: 'id',
          remote: {
            action: '/category/all',
            method: 'get',
            model: {},
            attrs: {}
          },
          options: [
            {
              label: '顶级分类',
              value: 0
            }
          ],
          selectAttrs: {
            filterable: true
          }
        },
        'grid-area': 'categoryId'
      },
      {
        'field-type': 'wang-editor',
        'field-label': '内容',
        id: 'content',
        model: 'content',
        attrs: {
          toolbarConfig: {},
          editorConfig: {},
          mode: 'simple',
          height: 350,
          customUploadOptions: {
            action: `${import.meta.env.VITE_API_BASE_URL}/file/upload-image`,
            fieldname: 'file',
            method: 'POST',
            srcModel: 'path'
          }
        },
        'grid-area': 'content'
      },
      {
        'field-type': 'radio-group',
        'field-label': '状态',
        id: 'status',
        model: 'status',
        name: 'status',
        options: [
          {
            value: 0,
            label: '草稿'
          },
          {
            value: 1,
            label: '发布'
          }
        ],
        attrs: {},
        'grid-area': 'status'
      },
      {
        'field-type': 'remote-object-select',
        'field-label': '标签',
        id: 'tags',
        model: 'tags',
        attrs: {
          optionLabel: 'name',
          optionValue: 'id',
          remote: {
            action: '/tag/all',
            method: 'get',
            model: {},
            attrs: {}
          },
          selectAttrs: {
            filterable: true,
            multiple: true
          }
        },
        'grid-area': 'tags'
      },
      {
        'field-type': 'image-upload',
        'field-label': '封面图',
        id: 'cover',
        model: 'coverId',
        attrs: {
          action: `${import.meta.env.VITE_API_BASE_URL}/file/upload-image`,
          imageModel: 'cover'
        },
        'grid-area': 'cover'
      }
    ]
  },
  remove: {
    id: 'article-remove-form',
    submitText: '删除',
    form: {
      action: '/article/$1',
      method: 'delete',
      model: {},
      attrs: {}
    },
    fields: []
  },
  deleteImage: {
    action: `${import.meta.env.VITE_API_BASE_URL}/file/remove-by-url`,
    method: 'post',
    fieldname: 'urls'
  }
}
</script>

<style scoped lang="scss"></style>
